<template>
  <el-form ref="activityRemarkRefForm" :model="activityRemarkQuery" label-width="120px" :rules="activityRemarkRules">
    <el-form-item label="ID">
      <div class="desc">{{activityDetail.id}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="负责人">
      <div class="desc"> {{activityDetail.ownerDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动名称">
      <div class="desc">{{activityDetail.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="开始时间">
      <div class="desc">{{activityDetail.startDate}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="结束时间">
      <div class="desc">{{activityDetail.endDate}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动预算">
      <div class="desc">{{activityDetail.cost}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动描述">
      <div class="desc">{{activityDetail.description}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="desc">{{activityDetail.createTime}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="desc">{{activityDetail.createByDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="desc">{{activityDetail.editTime}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="desc">{{activityDetail.editByDO.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="填写备注" prop="noteContent">
      <el-input
          v-model="activityRemarkQuery.noteContent"
          :row="6"
          type="textarea"
          placeholder="请输入活动备注"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="activityRemarkSubmit">提交</el-button>
      <el-button @click="goBack()">返 回</el-button>
    </el-form-item>
  </el-form>

  <!--详细展示备注内容表格-->
  <el-table
      :data="activityRemarkList"
      style="width: 100%">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column property="noteContent" label="备注内容"  />
    <el-table-column property="createTime" label="备注时间"  />
    <el-table-column property="createByDO.name" label="备注人" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByDO.name" label="编辑人" />
    <el-table-column label="操作" >
      <template #default="scope" >
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger"  @click="del(scope.row.id)"> 删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>
</template>

<script>
import {doGet, doPost} from "../http/httpRequest.js";
import {goBack, messageTip} from "../util/Util.js";

export default {
  name: "ActivityDetailView",
  inject :['reload'],
  data() {
    return {
      //活动详情对象
      activityDetail : {
        ownerDO : {},
        createByDO : {},
        editByDO : {}
      },
      //市场活动备注对象，初始值是空
      activityRemarkQuery : {},

      activityRemarkRules: {
        noteContent:[
          {required: true, message:'请输入活动备注',trigger:'blur'},
          {min: 5,max: 255,message: '活动备注长度为5-255个字符',trigger: 'blur'}
        ]
      },

      //活动备注得列表对象，初始值是空
      activityRemarkList : [{
        createByDO : {},
        editByDO : {}
      }],
      pageSize : 0,
      total : 0
    }
  },

  mounted(){
    this.loadActivityDetail();
    this.getActivityRemarkList(1);
  },

  methods:{
    //导入函数时，需要显示声明一下才可以使用
    goBack,
    //加载市场活动详情
    loadActivityDetail(){
      let id=this.$route.params.id;
      doGet("/api/activity/" +id,{}).then(resp=>{
        if(resp.data.code===200){
          this.activityDetail=resp.data.data;
          if(!this.activityDetail.ownerDO){
            this.activityDetail.ownerDO={}
          }
          if(!this.activityDetail.createByDO){
            this.activityDetail.createByDO={}
          }
          if(!this.activityDetail.editByDO){
            this.activityDetail.editByDO={}
          }
        }
      })
    },
    //提交活动备注
    activityRemarkSubmit() {
      this.$refs.activityRemarkRefForm.validate((isValid)=>{
        if(isValid){//restful风格 GET:查看  POST：新增 PUT：修改 DELETE:删除
          doPost("/api/activity/remark",{
            //提交两个参数-id，活动备注内容
            activityId: this.activityDetail.id,
            noteContent: this.activityRemarkQuery.noteContent
          }).then(resp=>{
            if (resp.data.code === 200){
              messageTip('提交成功',"success");
              this.reload();//需要inject注入
            }else {
              messageTip('提交失败',"error");
            }
          })
        }
      })
    },

    //查询活动备注列表数据
    getActivityRemarkList(current){
      doGet("/api/activity/remark",{
        current : current//当前查询第几页
      }).then(resp=>{
        console.log(resp)
        if(resp.data.code===200){
          this.activityRemarkList=resp.data.data.list;
          this.pageSize=resp.data.data.pageSize;
          this.total=resp.data.data.total;
        }
      })
    },
    toPage(current){
      this.getActivityRemarkList(current);
    }
  }
}
</script>

<style scoped>
.desc{
  background-color: #f9f9f9;
  width: 100%;
  padding-left: 15px;
}
</style>
